<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>单词消消乐</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .game-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            max-width: 800px;
            padding: 20px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .word-card {
            background-color: #f8f9fa;
            border: 2px solid #dee2e6;
            padding: 25px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-size: 18px;
            color: #333;
        }
        .word-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .word-card.selected {
            border-color: #0d6efd;
            background-color: #e9f5ff;
        }
        .word-card.matched {
            background-color: #d1e7dd;
            border-color: #badbcc;
            color: #0f5132;
        }
        .word-card.incorrect {
            background-color: #f8d7da;
            border-color: #f5c2c7;
            color: #842029;
        }
        .message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 24px;
            border-radius: 6px;
            font-size: 16px;
            z-index: 1000;
            animation: fadeOut 2s ease-in-out forwards;
        }
        .correct-message {
            background-color: #d1e7dd;
            color: #0f5132;
        }
        .incorrect-message {
            background-color: #f8d7da;
            color: #842029;
        }
        @keyframes fadeOut {
            0% { opacity: 1; }
            90% { opacity: 1; }
            100% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="game-container" id="game-container"></div>
    <script src="word_match_game.js"></script>
    <script>
        // 去重后的200个单词库
        const words = data.filter((word, index, self) =>
            index === self.findIndex((t) => (
                t.english === word.english && t.chinese === word.chinese
            ))
        );

        // 创建消息提示
        function showMessage(message, isCorrect) {
            const msg = document.createElement('div');
            msg.className = `message ${isCorrect ? 'correct-message' : 'incorrect-message'}`;
            msg.textContent = message;
            document.body.appendChild(msg);
            setTimeout(() => msg.remove(), 2000);
        }

        // 初始化游戏
        function initGame() {
            const gameContainer = document.getElementById('game-container');
            gameContainer.innerHTML = ''; // 清空游戏容器

            // 随机选择12个单词对
            const selectedWords = [];
            while (selectedWords.length < 12) {
                const randomIndex = Math.floor(Math.random() * words.length);
                const randomWord = words[randomIndex];
                if (!selectedWords.includes(randomWord)) {
                    selectedWords.push(randomWord);
                }
            }

            // 创建单词卡片
            const wordPairs = [...selectedWords, ...selectedWords.map(word => ({ english: word.chinese, chinese: word.english }))]; // 创建英文和中文的单词对
            wordPairs.sort(() => Math.random() - 0.5); // 打乱顺序

            wordPairs.forEach((word, index) => {
                const card = document.createElement('div');
                card.className = 'word-card';
                card.dataset.index = index;
                card.textContent = word.english; // 初始显示英文
                card.dataset.word = JSON.stringify(word); // 存储单词信息
                card.addEventListener('click', () => {
                    if (selectedCards.length < 2 && !card.classList.contains('selected') && !card.classList.contains('matched')) {
                        card.classList.add('selected');
                        selectedCards.push(card);

                        if (selectedCards.length === 2) {
                            checkMatch();
                        }
                    }
                });
                gameContainer.appendChild(card);
            });
        }

        // 检查是否匹配
        function checkMatch() {
            const [card1, card2] = selectedCards;
            const word1 = JSON.parse(card1.dataset.word);
            const word2 = JSON.parse(card2.dataset.word);

            if ((word1.english === word2.chinese && word1.chinese === word2.english)) {
                card1.classList.add('matched');
                card2.classList.add('matched');
                showMessage("匹配正确！", true);
            } else {
                card1.classList.add('incorrect');
                card2.classList.add('incorrect');
                showMessage("匹配错误，请重试", false);
                setTimeout(() => {
                    card1.classList.remove('selected', 'incorrect');
                    card2.classList.remove('selected', 'incorrect');
                }, 1000);
            }
            selectedCards = [];

            // 检查是否所有卡片都匹配成功
            const allCards = document.querySelectorAll('.word-card');
            const allMatched = [...allCards].every(card => card.classList.contains('matched'));
            if (allMatched) {
                showMessage("恭喜，所有单词都匹配成功！进入下一关...", true);
                setTimeout(initGame, 2000); // 2秒后进入下一关
            }
        }

        let selectedCards = [];
        initGame(); // 初始化游戏
    </script>
</body>
</html>